import * as React from "react"
import { View, ViewStyle } from "react-native"
import styled from "styled-components/native"
import { Text } from "../text"
import { px2dp } from "../../utils"

const StyledHeaderText = styled.View`
  padding: ${px2dp(22)}px 0 ${px2dp(12)}px 0;
  min-height: ${px2dp(124)}px;
`

const StyledHeaderTitle = styled.Text`
  font-size: ${px2dp(24)}px;
  margin-bottom: ${px2dp(10)}px;
`

export interface RegisterHeaderProps {
  /**
   * Text which is looked up via i18n.
   */
  tx?: string

  /**
   * The text to display if not using `tx` or nested components.
   */
  text?: string

  title?: string

  subTitle?: string

  /**
   * An optional style override useful for padding & margin.
   */
  style?: ViewStyle
}

/**
 * Stateless functional component for your needs
 *
 * Component description here for TypeScript tips.
 */
export function RegisterHeader(props: RegisterHeaderProps) {
  // grab the props
  const { title, subTitle } = props
  return (
    <View>
      <StyledHeaderText>
        <StyledHeaderTitle>{title}</StyledHeaderTitle>
        <Text style={{ color: "#6d788e" }}>{subTitle}</Text>
      </StyledHeaderText>
    </View>
  )
}
